<template>
	<view class="equity-card">
		<view class="equity_card_Box">
			<view class="card_Box">
				<view class="card_header">
					<view class="card_header_left">
						<image :src="detailsData.shopIcon"  v-if="detailsData.shopIcon != ''"></image>
						<text class="card_h_title">{{detailsData.name}}</text>
					</view>
					<view class="card_header_right">
						<view class="numBox">
						    <text class="left_01">编号</text>
						    <text class="left_02">{{detailsData.cardNo}}</text>
						</view>
                        <view class="more" @click="handleCodingPupop">
                            <text>展开编号</text>
                            <image class="b_info_right02" src="/static/my/e_card02.png" mode="widthFix"></image>
                        </view>
					</view>
				</view>
				<view class="card_center">
					<image :src="detailsData.cover" mode="widthFix"></image>
					<!-- <view class="card_center_word">持卡{{detailsData.holdDay}}天，为你节省{{detailsData.useDiscountMoney}}元</view> -->
				</view>
				<view class="card_bottom">
					<view class="b_info">
						<view class="b_info_left">
							<view class="b_info_button" v-if="detailsData.isChain">已上链</view>
							<view class="b_info_button" v-else>未上链</view>
							<text class="ellipseHide_two" style="width: 340rpx;">{{detailsData.cardName}}</text>
							<!-- <text class="b_info_name"></text> -->
						</view>
						<navigator class="b_info_right" hover-class="none" :url="'/pages/my/equity-card/chain-information/chain-information?id='+detailsData.id">
							<image class="b_info_right01" src="/static/my/e_card01.png" mode="widthFix"></image>
							<text>链上信息</text>
							<image class="b_info_right02" src="/static/my/e_card02.png" mode="widthFix"></image>
						</navigator>
					</view>
                   <view class="li_lable">
                   	<view class="lable_item lable_xuanzhang " v-if="detailsData.functionType == 2">
                   		<image src="/static/index/label04.png" mode="widthFix"></image>
                   		<text class="lable_name ellipseHide">勋章NFR</text>
                   	</view>
                   	<view class="lable_item lable_equity " v-if="detailsData.functionType == 1">
                   		<image src="/static/index/quanyi.png" mode="widthFix"></image>
                   		<text class="lable_name ellipseHide">权益NFR</text>
                   	</view>
                    <view class="lable_item lable_suanli" v-if="detailsData.hashRate > 0">
                    	<image src="/static/index/suanli.png" mode="widthFix"></image>
                    	<text class="lable_name ellipseHide">算力:{{detailsData.hashRate}}</text>
                    </view>
                    <view class="lable_grade_box" v-for="(nav,zIndex) in detailsData.equityCardTagList" :key="zIndex">
                    	<image :src="nav.img" style="height: 38rpx;" mode="heightFix"></image>
                    	<view class="lable_item lable_grade">
                    		<text class="lable_name ellipseHide">{{nav.name}}</text>
                    	</view>
                    </view>
                   	
                   	<!-- <view class="lable_item lable_grade">
                   		<image src="/static/index/label03.png" mode="widthFix"></image>
                   		<text class="lable_name ellipseHide">等级 SSR</text>
                   	</view> -->
                   </view>
					<view class="wallet_box" >
						<view class="wallet ellipseHide">
							交易哈希：{{detailsData.voucher}}
						</view>
						<view class="wallet_img" @click="copy(detailsData.voucher)">
							<image src="/static/my/copy01.png" mode="widthFix"></image>
						</view>
					</view>

				</view>
			</view>
			
            <!-- <view class="card_nav">
				<view class="card_nav_li" @click="sysfunc">
					<image src="/static/my/nav_09.png" mode="widthFix"></image>
					<text>我要刷卡</text>
				</view>
				<navigator class="card_nav_li" hover-class="none" :url="'/pages/my/equity-card/punch-in-record/punch-in-record?id='+detailsData.id">
					<image src="/static/my/nav_08.png" mode="widthFix"></image>
					<text>打卡记录</text>
				</navigator>
				<navigator class="card_nav_li" hover-class="none" :url="'/pages/my/equity-card/chain-information/chain-information?id='+detailsData.id">
					<image src="/static/my/nav_03.png" mode="widthFix"></image>
					<text>链上信息</text>
				</navigator>
				<view class="card_nav_li" @click="shareShow=true">
					<image src="/static/my/nav_07.png" mode="widthFix"></image>
					<text>分享</text>
				</view>
			</view> -->
            
			<view class="menTitle">
                <view class="left">
                    <view class="titleLine"></view>
                    <text v-if="detailsData.functionType == 1">权益卡详情</text>
                    <text v-if="detailsData.functionType == 2">NFR勋章详情</text>
                </view>
				<view class="btn" @click="goExamplesOf" v-if="detailsData.donationStatus == 2">转赠</view>
			</view>
			<view class="card_info">
				<view class="card_info_li">
					<view class="info_li_left">卡名称</view>
					<view class="info_li_right">{{detailsData.cardName}}</view>
				</view>
				<view class="card_info_li">
					<view class="info_li_left">售价</view>
					<view class="info_li_right">￥{{detailsData.price}}</view>
				</view>
				<view class="card_info_li">
					<view class="info_li_left">发行数量</view>
					<view class="info_li_right">{{detailsData.issueTotal}}</view>
				</view>
				<view class="card_info_li">
					<view class="info_li_left">持卡天数</view>
					<view class="info_li_right">{{detailsData.holdDay}}天</view>
				</view>
				

			</view>
            <template v-if="detailsData.equityIssueStatus == 1">
                <view class="menTitle">
                    <view class="left">
                        <view class="titleLine"></view>
                        <text>权益卡权益</text>
                        <image class="wen" src="../../../static/my/wen.png" mode="" @click="handleInfo" v-if="isActivatio"></image>
                    </view>
                	<view class="right" @click="handlehistory">
                        <text>历史权益</text>
                        <image src="../../../static/my/right_arrow.png" mode="" ></image>
                    </view>
                </view>
                <view class="interest_zanwu" v-if="!isQuityCard">
                    <image src="../../../static/my/zanwu.png" mode=""></image>
                    <text>暂无权益</text>
                </view>
                <view class="card_interests" v-if="isQuityCard">
                    <view class="int_name">{{quityCardData.name}}</view>
                    <view class="int_time" v-if="quityCardData.timeType == 1">{{quityCardData.startTime}}至{{quityCardData.endTime}}期间内激活领用</view>
                    <image class="int_img" :src="quityCardData.picture" mode="widthFix"></image>
                    <view class="int_receive">
                       <text  @click="handlePupop" v-if="!isActivatio">当前权益未激活，前往领取</text>
                       <text  @click="handleCodePupop" v-if="isActivatio">已激活，查看权益码 </text>
                       <image mode="widthFix" src="../../../static/my/lan_rig.png"></image>
                    </view>
                </view>
            </template>
            
			<view class="menTitle">
                <view class="left">
                    <view class="titleLine"></view>
                    <text  v-if="detailsData.functionType == 1">权益卡介绍</text>
                    <text  v-if="detailsData.functionType == 2">NFR勋章介绍</text>
                </view>
			</view>
		</view>
		<block v-for="(cc,ccindex) in detailsData.cardImgList" :key="ccindex">
		   <image class="card_image" :src="cc" mode="widthFix"></image>
		</block>
        <view class="suspension">
            <view class="list_btn">
                <view class="tou" v-if="isPrev"></view>
                 <view class="btn" @click="handlePrev">
                    <image src="../../../static/my/lf_yuan.png" mode=""></image>
                    <text>上一张</text>
                 </view>
            </view>
            <view class="list_btn">
                <view class="tou" v-if="isNext"></view>
                 <view class="btn" @click="handleNext">
                    <image src="../../../static/my/rig_yuan.png" mode=""></image>
                    <text>下一张</text>
                 </view>
                
            </view>
            <view class="list_btn">
                <view class="btn" @click="back">
                    <image src="../../../static/my/rig_black.png" mode=""></image>
                    <text>返回</text>
                </view>
            </view>
        </view>
        <DetailDialog ref="pupop" :backColor="backColor" :title="title" @confirm="handleConfirm">
            <view slot="one" class="codingBox" v-if="pupopType == 'coding'">
                <view class="minTit">卡片编码</view>
                <scroll-view scroll-y="true" class="boxScrollView" >
                    <view class="conten">
                       <view class="thead thig">
                           <view class="">编号</view>
                           <view class="" v-if="detailsData.equityIssueStatus == 1">我的权益</view>
                       </view>
                       <view class="tbody thig" v-for="(item,index) in CardNoList" :key="index" @click="codeRefresh(item.id)">
                           <view class="" >{{item.cardNo}}</view>
                           <view class="" v-if="detailsData.equityIssueStatus == 1">{{item.status}}</view>
                       </view>
                      
                    </view>
                </scroll-view>
                 <view class="diaBtn_code">
                    <view class="btn" @click="handleClose">返回</view>
                 </view>
            </view>
           <view slot="one" v-if="pupopType == 'one'">
                <view class="content">激活权益后将分配您权益码是否激活？</view>
                <view class="diaBtn">
                    <view class="Btn" @click="handleClose">暂时不用</view>
                    <view class="Btn blue" @click="activation()">确认激活</view>
                </view>
            </view>
            <view slot="one" v-if="pupopType == 'two'">
                 <view class="content">暂无权益码库存，请等待运营发放</view>
                 <view class="diaBtn">
                     <!-- <navigator url="/pages/my/customer-service/customer-service"> -->
                    <view class="Btn" @click="handleCustomer">联系客服</view>
                     <!-- </navigator> -->
                     <view class="Btn blue" @click="handleClose">我知道了</view>
                 </view>
             </view>
             <view slot="one" v-if="pupopType == 'interestsCode'">
                  <view class="codeBox">
                    <view class="text">{{equityCodeData.code}}</view>
                    <image src="../../../static/my/copy.png" mode="" @click="copy(equityCodeData.code)"></image>
                  </view>
                  <view class="instructions">
                    <view class="bt">权益说明：</view>
                    <view class="txt">{{equityCodeData.notes}}</view> 
                  </view>
              </view>
              <!-- 历史权益卡弹窗 -->
              <view slot="one" v-if="pupopType == 'historyCode'" style='padding-bottom: 60rpx;'>
                    <scroll-view scroll-y="true" class="historyScrollView" style="margin-top: 30rpx;">
                       <view class="codeNameBox" v-for="(item,index) in HistoryList">
                            <view class="name">{{item.name}} </view>
                            <view class="conten">
                                <view class="text">{{item.code}}</view>
                                <image src="../../../static/my/copy.png" mode="" @click="copy(item.code)"></image>
                            </view>
                       </view>
                    </scroll-view>
               </view>
               <view slot="one" v-if="pupopType == 'interestsInfo'" style='padding-bottom: 60rpx;'>
                    <view class="Info">
                        <view class="txt">· {{equityCodeData.notes}}</view>
                    </view>
                </view>
        </DetailDialog>
	</view>
</template>

<script>
	import jweixin from '@/components/jweixin-module/jsdk'
	import wechat from '@/components/jweixin-module/wechat'
    import DetailDialog from './components/DetailDialog.vue'
	export default {
		data() {
			return {
				detailsData:{}, //卡详情
				bImgUrl:'',
                pupopType: 'coding',
                title:'温馨提示',
                backColor: 'linear-gradient(180deg, #EFE0FF 0%, #E1E9FF 10.79%,#FFFFFF 100%)',
                CardNoList: [],
                CardIdList: [],//拥有卡的ID数组
                HistoryList: [],//历史权益卡
                isQuityCard: false,//是否有权益卡权益
                quityCardData: {},//权益卡权益
                equityCodeData: {},// 激活权益码
                isActivatio: false,//权益是否激活
                isPrev: false,//上一页按钮是否显示
                isNext: false,//下一页按钮是否显示
                cardLocation: 0,
			}
		},
        components: {
          DetailDialog,
        },
		async onLoad(e) {
			this.bImgUrl = this.baseImgUrl
			this.id = e.id
			await this.getCustomerCardDetail(this.id)
            this.getCustomerCardIdList()
            await this.getEquityCardEquity()
			// wechat.wexinHide()
			// this.getCustomerCardDetail(id)
            
		},
		methods: {
            //权益卡权益
            async getEquityCardEquity(){
                if(!this.detailsData.equityCardId) return false 
                const data = {
                    equityCardId: this.detailsData.equityCardId
                }
                var res =await this.$api.getEquityCardEquity(data)
                
                var is = Object.keys(res.result)
                console.log('is',is)
                if(is.length > 0){
                    this.isQuityCard = true
                    this.quityCardData = res.result
                    this.getEquityCode()
                }else{
                    this.isQuityCard = false
                }
                
            },
            //当前权益是否已激活
            async getIsActivation(){
                const data = {
                    customerCardId: this.detailsData.id,
                    equityCardId: this.detailsData.equityCardId
                }
                var res = await this.$api.getIsActivation(data) 
                this.isActivatio = res.result
                console.log('this.isActivatio',this.isActivatio)
                
            },
            //我的卡包券 ID集合
            async getCustomerCardIdList(){
                var res =await this.$api.getCustomerCardIdList()
                this.CardIdList = res.result
                this.judgeId(this.id)
            },
            judgeId(id){
                this.CardIdList.forEach((item,index) => {
                    
                    if(id == item){
                        console.log(index)
                        console.log('this.CardIdList.length',this.CardIdList.length)
                        this.cardLocation = index
                        if(index == 0){
                            console.log('第一')
                           this.isPrev = true 
                           this.isNext = false 
                        }else if(index == this.CardIdList.length - 1){
                            console.log('第二')
                            this.isNext = true 
                            this.isPrev = false 
                        }else{
                            this.isPrev = false
                            this.isNext = false 
                        }
                        console.log('this.isPrev',this.isPrev)
                    }
                })
            },
			// 数字权益卡
			async getCustomerCardDetail(id) {
				var _this = this
                try{
                   var res = await this.$api.getCustomerCardDetail(id)
                   this.detailsData = res.result 
                } catch {
					uni.switchTab({
						url:'/pages/my/my'
					})
                    // uni.navigateBack({
                    //     delta: 1,
                    // })
                }
				
			},

			copy(text){
				if(text != ''){
					var _this = this
					 _this.$copyText(text).then(
                        res => {
                          uni.showToast({
                            title: '复制成功',
                            icon: 'none'
                          })
                        }
                      )
				}

			},
            //查看编码
            async handleCodingPupop(){
                var params = {
                    equityCardId: this.detailsData.equityCardId
                }
                console.log('params',params)
                var res = await this.$api.getCardNoList(params) 
                this.CardNoList = res.result
                this.pupopType = 'coding'
                this.title = this.detailsData.cardName
                this.$refs['pupop'].open()
            },
            //激活权益卡
            async handlePupop(){
                
                var flag = await this.getEquityCodeInventory()
                 console.log('flag',flag)
                if(flag == 1){
                    this.pupopType = 'one'
                    this.title = '温馨提示'
                    this.$refs['pupop'].open()
                }else if(flag == 2){
                    this.pupopType = 'two'
                    this.title = '温馨提示'
                    this.$refs['pupop'].open()
                }
                
            },
            async getEquityCodeInventory(){
                const params = {
                    customerCardId: this.detailsData.id,
                    equityCardId: this.detailsData.equityCardId
                }
                var res = await this.$api.getEquityCodeInventory(params) 
                var flag = res.result.flag
                console.log('flag',flag)
                return flag
            },
            //查看权益码
             handleCodePupop(){
                this.pupopType = 'interestsCode'
                this.title = '您的权益码'
                this.$refs['pupop'].open()
            },
            //获取权益码和是否激活权益码
            async getEquityCode(){
                const data = {
                    customerCardId: this.detailsData.id,
                    equityCardId: this.detailsData.equityCardId
                }
                var res = await this.$api.getEquityCode(data) 
                this.equityCodeData = res.result
                this.isActivatio = res.result.activation
            },
            //历史权益卡
            async handlehistory(){
                var params = {
                    customerCardId: this.detailsData.id,
                    equityCardId: this.detailsData.equityCardId
                }
                var res = await this.$api.getHistoryCardNoList(params) 
                this.HistoryList = res.result
                this.pupopType = 'historyCode'
                this.title = '历史权益码'
                this.$refs['pupop'].open()
            },
            //权益说明
            handleInfo(){
                 this.pupopType = 'interestsInfo'
                 this.title = '权益说明'
                 this.$refs['pupop'].open()   
            },
            //关闭弹窗
            handleClose(){
                this.$refs['pupop'].close()
            },
            //激活
            async activation(){
                var _this = this
                const params = {
                    customerCardId: this.detailsData.id,
                    equityCardId: this.detailsData.equityCardId
                }
                var res = await this.$api.activateCoupons(params) 
                console.log('res',res.code)
                if(res.code == 200){
                    uni.showToast({
                        title:'激活成功',
                        icon: 'none',
                    })
                    this.handleClose()
                    this.getEquityCardEquity()
                }
            },
            
            //上一张
             handlePrev(){
                console.log('hahahah ',this.cardLocation)
                this.cardLocation --
                this.CardIdList.forEach((item,index) => {
                    if(this.cardLocation == index){
                        this.init(item)
                    }
                })
            },
            //下一张
            handleNext(){
                this.cardLocation ++
                this.CardIdList.forEach((item,index) => {
                    if(this.cardLocation == index){
                       this.init(item)
                    }
                })
            },
            // 初始化数据
            async init(item){
                await this.getCustomerCardDetail(item)
                await this.getEquityCardEquity()
                this.judgeId(item)
            },
            //放回按钮
            back(){
            	//uni.navigateBack()//默认delta:1
            	// uni.navigateBack({
            	// 	delta:1,//返回层数，2则上上页
            	// })
                uni.reLaunch({
                    url:'/pages/my/my'
                })
            },
            //联系客服
            handleCustomer(){
                uni.navigateTo({
                    url: '/pages/my/customer-service/customer-service'
                })
            },
            //转赠
            goExamplesOf(){
                
                window.location.href = '/pages/pay/examplesOf?id='+this.detailsData.id
            },
            //点击卡编号刷新
            codeRefresh(id){
                this.handleClose()
                this.init(id)
                 
            },
		}
	}
</script>

<style scoped>
	page{
		background: #F8FBFF;
		padding-bottom: 40rpx;
	}
	.equity_card_Box{
		width: 686rpx;
		margin: 0 auto;
		padding-top: 40rpx;
	}
	.card_Box{
		width: 100%;
		box-shadow: 4rpx 8rpx 16rpx #F3F3F3;
		border-radius: 32rpx;
		background-color: #fff;
	}
	.card_header{
		padding: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.card_header .card_h_title{
        width: 250rpx;
		font-weight: 400;
		font-size: 30rpx;
        overflow:hidden; 
         text-overflow:ellipsis;
         display:-webkit-box;    //将对象作为弹性伸缩盒子模型显示。
         -webkit-box-orient:vertical;  // 从上到下垂直排列子元素
         -webkit-line-clamp:1; //显示的行数
	}
	.card_header_left{
		display: flex;
		flex-direction: row;
		align-items: center;
        /* width: 350rpx; */
	}
    .card_header_left image{
       width: 60rpx;
       height: 60rpx;
       margin-right: 10rpx;
       border-radius: 50%;
    }
	.card_header_right{
		display: flex;
		justify-content: space-between;
        align-items: center;
        /* flex: 1; */
	}
    .card_header_right .numBox {
        height: 36rpx;
        display: flex;
		flex-direction: row;
        justify-content: space-between;
        align-items: center;
        /* width: 184rpx; */
        /* border: 1rpx solid #F1C67F; */
        margin-right: 14rpx;
    }

	.card_header_right .numBox text {
		font-weight: 400;
		font-size: 24rpx;
	}
	
	.card_header_right .numBox .left_01 {
		color: #824806;
		background: linear-gradient(90deg, #F0C57D 3.45%, #F8E2B1 100%);
		border-radius: 4rpx 0 0 4rpx;
        width: 64rpx;
		display: flex;
		align-items: center;
		justify-content: center;
        height: 100%;
        
	}
    .card_header_right .numBox .left_02 {
        /* width: 116rpx; */
        padding: 0 10rpx;
		height: 100%;
    	color: #CB7F00;
    	text-align: center;
		border-style:solid;
		border-width:2rpx;
		border-color:#F1C67F;
		box-sizing: border-box;
    	border-radius: 0px 4rpx 4rpx 0px;

    }
	.card_header_right .more{
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .card_header_right .more text{
        color: #1557F2;
        font-size: 24rpx;
    }
    .card_header_right .more image{
        width: 10rpx;
        margin-left: 4rpx;
    }
	
	.card_center{
		position: relative;
		width: 100%;
		display: flex;
		/* height: 300rpx; */
	}
	.card_center image{
		width: 100%;
		/* height: 300rpx; */
	}
	.card_center_word{
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 72rpx;
		background: rgba(150, 175, 12, .3);
		font-size: 30rpx;
		color: #fff;
		line-height: 72rpx;
		padding-left: 20rpx;
		box-sizing: border-box;
	}
	.card_bottom{
		width: 100%;
		padding: 26rpx 20rpx 20rpx 20rpx;
		box-sizing: border-box;
	}
	.card_bottom .b_info{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.card_bottom .b_info .b_info_name{
		display: block;
		width: 360rpx;
		font-size: 38rpx;
		color: #000000;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.card_bottom .b_info .b_info_button{
		background: linear-gradient(90deg, #3399F2 0%, #4567D4 100%);
		border-radius: 8rpx;
		padding: 6rpx 10rpx;
		margin-right: 10rpx;
		font-size: 22rpx;
		color: #fff;
		align-self: baseline;
	}
	.b_info .b_info_left{
		display: flex;
		flex-direction: row;
		/* align-items: center; */
	}
	.b_info .b_info_right{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.b_info .b_info_right text{
		font-size: 28rpx;
		line-height: 40rpx;		
		color: #0C5EFD;
		margin-left: 12rpx;
		margin-right: 8rpx;
	}
	.b_info_right .b_info_right01{
		width: 26rpx;
	}
	.b_info_right .b_info_right02{
		width: 14rpx;
	}
    .xz_type{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 16px;
    }
    .xz_type image{
        width: 148rpx;
        height: 44rpx;
        margin-right: 14rpx;
    }
	/* 钱包地址 */
	.wallet{
		max-width: 520rpx;
	}
	.wallet_box{
		color: #000000;
		font-size: 28rpx;
		margin-top: 26rpx;
		display: flex;
		flex-direction: row;
		
	}
	.wallet_box .wallet_img{
		width: 32rpx;
		height: 30rpx;
		margin-left: 10rpx;
	}
	.wallet_box .wallet_img image{
		width: 100%;
		height: 100%;
	}
/* 	.card_nav{
		width: 100%;
		height: 148rpx;
		background: #FFFFFF;
		box-shadow: 4rpx 4rpx 12rpx #EEEEEE;
		border-radius: 32rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin-top: 20rpx;
	}
	.card_nav_li{
		width: calc(100% / 4 );
		height: 100%;
		font-size: 26rpx;
		color: #202731;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.card_nav_li image{
		width: 48rpx;
		height: 44rpx;
		margin-bottom: 8rpx;
	} */

	/* .card_nav_li:nth-child(3) image{ width: rpx; } */

	.menTitle{
		
		display: flex;
        justify-content: space-between;
		padding: 20rpx 0;
		
	}
    .menTitle .left{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 34rpx;
        font-weight: 600;
        flex-direction: row;
        align-items: center;
        color: #000000;
    }
    .menTitle .left .wen{
        width: 40rpx;
        height: 40rpx;
        margin-left: 12rpx;
    }
	.menTitle .titleLine{
		width: 6rpx;
		height: 32rpx;
		background: linear-gradient(90deg, #0B87F2 0%, #6752EA 100%);
		border-radius: 20rpx;
		margin-right: 12rpx;
	}
    .menTitle .btn{
        width: 128rpx;
        height: 52rpx;
        border-radius: 100rpx;
        text-align: center;
        line-height: 52rpx;
        color: #fff;
        font-size: 28rpx;
        background: linear-gradient(90deg, #0B87F2 0%, #6752EA 100%);
    }
    
    .menTitle .right{
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .menTitle .right text{
        color: #666666;
        font-size: 28rpx;
        margin-right: 10rpx;
    }
    .menTitle .right image{
        width: 11rpx;
        height: 18rpx;
    }
	.card_info{
		width: 100%;
		border-radius:32rpx;
		background: #fff;
		margin-bottom: 20rpx;
	}
	.card_info_li{
		width: 100%;
		color: #000000;
		display: flex;
		justify-content: space-between;
		padding: 30rpx 24rpx;
		box-sizing: border-box;
		border-bottom: 2rpx solid #EDEDED;
	}
	.card_info_li .info_li_left{
		font-size: 30rpx;
		font-weight: 600;
		max-width: 500rpx;
	}
	.card_info_li .info_li_right{
		font-size: 30rpx;
	}
	.card_info_li .info_li_right{
		display: flex;
		flex-direction: row;
	}
	.card_info_li .info_li_right .details{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 10rpx;
		color: #0B87F2;
		
	}
	.details .info-up{
		width: 22rpx;
		height: 12rpx;
		transform: rotate(180deg);
		margin-left: 4rpx;
		transition: all 0.2s;
	}
	.detailsS .info-up{
		transition: all 0.2s;
		transform: unset;
	}
	.card_image{
		width: 100%;
		padding-bottom: 20rpx;
	}
    .interest_zanwu{
        display: flex;
        flex-direction: column;
        padding: 120rpx 0 200rpx 0 ;
        align-items: center;
    }
    .interest_zanwu image{
        width: 428rpx;
        height: 240rpx;
    }
    .interest_zanwu text{
        font-size: 30rpx;
        color: #999;
    }
    .card_interests{
        background: #fff;
        box-shadow: 2px 4px 8px #F3F3F3;
        border-radius: 32rpx;
        padding: 40rpx 28rpx;
    }
    .int_name{
        color: #0B87F2;
        font-size: 32rpx;
    }
    .int_time{
        color: #333;
        font-size: 26rpx;
        margin-top: 17rpx;
    }
    .int_img{
        margin-top: 28rpx;
        width: 100%;
    }
    .int_receive{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 30rpx;
    }
    .int_receive text{
        font-size: 30rpx;
        color: #1557F2;
    }
    .int_receive image{
        width: 22rpx;
        height: 18rpx;
        margin-left: 10rpx;
    }
    .suspension{
        width: 170rpx;
        height: 212rpx;
        position: fixed;
        bottom: 200rpx;
        right: 0;
    }
    .suspension .list_btn{
        position: relative;
        width: 164rpx;
        height: 60rpx;
        border-top-left-radius: 50rpx;
        border-bottom-left-radius: 50rpx;
        background: #fff;
        box-shadow: 0px 6rpx 16rpx #D8D8D8;
        margin-bottom: 16rpx;
    }
    .suspension .list_btn .tou{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border-top-left-radius: 50rpx;
        border-bottom-left-radius: 50rpx;
        background: #fff;
        opacity: 0.4;
        z-index: 9;
    }
    .suspension .list_btn .btn{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .suspension .list_btn .btn image{
        width: 48rpx;
        height: 48rpx;
        margin-left: 8rpx;
    }
    .suspension .list_btn .btn text{
        color: #222222;
        font-size: 26rpx;
        margin-left: 12rpx;
    }
 /*   .dialogBox{
        width: 560rpx;
        border-radius: 20rpx;
        background: linear-gradient(180deg, #EFE0FF 0%, #E1E9FF 10.79%,#FFFFFF 100%);
        position: relative;
        z-index: 999;
    }
    .dialogBox .title{
        width: 100%;
        text-align: center;
        padding-top: 40rpx;
        font-size: 38rpx;
        color: #333;
        font-weight: 500;
    } */
    .dialogBox .content{
        padding: 50rpx 0;
        display: flex;
        justify-content: center;
        font-size: 28rpx;
        color: #333;
    }
    .dialogBox .codeBox{
        margin: 30rpx 24rpx;
        background: #fff;
        display: flex;
        justify-content: space-between;
        padding: 24rpx;
        border-radius: 20rpx;
    }
    .dialogBox .codeBox .text{
        width: 380rpx;
        word-break:break-all;  
        word-wrap:break-word;  
    }
    .dialogBox .codeBox image{
        width: 34rpx;
        height: 36rpx;
    }
    .dialogBox .instructions{
        border-top: 1rpx solid  #D4D4D4;
        margin-top: 30rpx;
        padding: 30rpx 24rpx;
    }
    .dialogBox .instructions .bt{
        color: #222;
        font-size: 28rpx;
    }
    .dialogBox .instructions .txt{
        font-size: 24rpx;
        color: #555;
        margin-top: 8rpx;
        line-height: 1.8;
    }
    .codeNameBox{
        margin: 0 24rpx 30rpx 24rpx;
        background: #fff;
        padding: 24rpx;
        border-radius: 20rpx;
        box-shadow: 0px 0px 8px #EAEAEA;
    }
    .codeNameBox .name{
        font-size: 30rpx;
        color: #222;
    }
    .codeNameBox .conten{
        display: flex;
        justify-content: space-between;
    }
    .codeNameBox .conten .text{
        width: 380rpx;
        color: #333;
        word-break:break-all;  
        word-wrap:break-word;  
    }
    .codeNameBox .conten image{
        width: 34rpx;
        height: 36rpx;
    }
    .codingBox{
        
    }
    .codingBox .minTit{
        width: 100%;
        text-align: center;
        color: #222;
        font-size: 30rpx;
        margin-top: 14rpx;
    }
    .boxScrollView{
        height: 400rpx;
    }
    /deep/ .boxScrollView ::-webkit-scrollbar{
    	display: none;
    }
    .historyScrollView{
        max-height: 600rpx;
    }
    /deep/ .historyScrollView ::-webkit-scrollbar{
    	display: none;
    }
    .codingBox .conten{
        border: 1rpx solid #E6E6E6;
        border-radius: 8rpx;
        margin-top: ;
        width: 412rpx;
        margin: 34rpx auto 0 auto;
        display: flex;
        flex-direction: column;
    }
    .codingBox .conten .thead{
        font-size: 30rpx;
        font-weight: 500;
        height: 64rpx;
        color: #222;
        display: flex;
        justify-content: space-between;
    }
    .codingBox .conten .tbody{
        font-size: 28rpx;
        height: 64rpx;
        color: #333;
        display: flex;
        justify-content: space-between;
    }
    .codingBox .conten .thig:last-child{
        border: none;
    }
    .codingBox .conten .thig{
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom:1rpx solid #E5E5E5 ;
    }
    .codingBox .conten .thig view{
        display: flex;
        flex: 1;
        justify-content: center;
        align-items: center;
        height: 100%;
    }
    .codingBox .conten .thig view:nth-child(1){
        border-right: 1rpx solid #E5E5E5;
    }
    .codingBox .conten .text{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .Info {
        margin: 30rpx 24rpx 0 24rpx;
        padding: 24rpx;
        font-size: 28rpx;
        
    }
    .Info .txt{
        line-height: 1.8;
        color: #222;
    } 
    .diaBtn_code{
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 60rpx 0 40rpx 0;
    }
    .diaBtn_code .btn{
        border: 2rpx solid #0B87F2;
        width: 200rpx;
        height: 72rpx;
        line-height: 72rpx;
        text-align: center;
        color: #0B87F2;
        font-size: 30rpx;
        border-radius: 16rpx;
    }
    .diaBtn{
       
        width: 100%;
        height: 104rpx;
        display: flex;
        justify-content: center;
        border-top: 1rpx solid #eee;
    }
    .diaBtn .Btn{
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1;
        font-size: 36rpx;
        color: #444;
    }
    .diaBtn .Btn:nth-child(1){
        border-right: 1rpx solid #eee;
    }
    .diaBtn .blue{
        color: #6752EA;
    }
    /* 标签页 */
    .li_lable{
    	display: flex;
    	flex-wrap: wrap;
    	/* flex-direction: row; */
    	/* margin-top: 48rpx; */
    	font-family: 'PingFang SC';
    	font-style: normal;
    	font-weight: 400;
    	font-size: 22rpx;
    	color: #FFFFFF;
        margin-top: 22rpx;
    }
    .lable_item{
    	position: relative;
    	display: flex;
    	align-items: center;
    	margin-right: 10rpx;
    	padding-left: 30rpx;
    	padding-right: 10rpx;
    	/* padding: 4rpx 10rpx 4rpx 26rpx; */
    	box-sizing: border-box;
    	min-width: 126rpx;
    	max-width: 280rpx;
    	height: 36rpx;
    	margin-bottom: 20rpx;
    	
    }
    .lable_item image{
    	position: absolute;
    }
    .lable_suanli image{
    	top: -5rpx;
    	left: -24rpx;
    	width: 44rpx;
    	height: 44rpx;
    }
    .lable_suanli{
    	margin-left: 25rpx;
    	background: linear-gradient(90deg, #9D5AFF 4.62%, #4F56FF 105.38%);
    	border-radius: 0rpx 200rpx 200rpx 0rpx;
    }
    .lable_xuanzhang image{
    	top: -7rpx;
    	left: -20rpx;
    	width: 44rpx;
    	height: 44rpx;
    }
    .lable_xuanzhang {
    	margin-left: 10rpx;
    	background: linear-gradient(90deg, #FF8540 4.62%, #FF4926 105.38%);
    	border-radius: 0rpx 200rpx 200rpx 0rpx;
    	/* background: url('/static/index/lable_bg01.png') no-repeat;
    	background-size: 100% 100%; */
    }
    
    .lable_equity image{
    	top: -6rpx;
    	left: -23rpx;
    	width: 44rpx;
    	height: 44rpx;
    }
    .lable_equity {
    	margin-left: 25rpx;
    	/* background: url('/static/index/lable_bg02.png') no-repeat;
    	background-size: 100% 100%; */
    	background: linear-gradient(90deg, #5C4117 4.62%, #2D3332 105.38%);
    	border-radius: 0rpx 200rpx 200rpx 0rpx;
    }
    .lable_grade_box{
    	position: relative;
    	margin-left: 16rpx;
    	height: 36rpx;
    }
    .lable_grade image{
    	height: 36rpx;
    	position: absolute;
    	top: 0;
    }
    .lable_grade {
    	position: absolute;
    	top: 0;
    	background-size: 100% 100%;
    	background-repeat: no-repeat;
    	margin-left: 16rpx;
    	/* background: url('/static/index/lable_bg03.png') no-repeat;
    	background-size: 100% 100%; */
    	/* background: linear-gradient(90deg, #D0A043 4.62%, #BA7D37 105.38%); */
    	border-radius: 0rpx 200rpx 200rpx 0rpx;
    }
    .lable_suanli image{
    	top: -5rpx;
    	left: -24rpx;
    	width: 44rpx;
    	height: 44rpx;
    }
    .lable_suanli{
    	margin-left: 25rpx;
    	background: linear-gradient(90deg, #9D5AFF 4.62%, #4F56FF 105.38%);
    	border-radius: 0rpx 200rpx 200rpx 0rpx;
    }
</style>
